<template>
	<view class="container">
		<view></view>
		<view class="backgroundBox">
			<!-- <view class="logoInc">
				<image src="/static/image/centerBoll.png" mode="widthFix"></image>
			</view> -->
			<view class="imageBg">
				<image src="/static/image/mobileBg.png" mode="aspectFill"></image>
			</view>
			<view class="copyright">
				版权所有 上海卡遇文化发展有限公司 <span @click='goBeian'>沪ICP备2024099314号-1</span>
			</view>
			<u-overlay :show="show" opacity='0.7'>
				<view class="overlayBox">
					<image src="/static/image/shodow.png" mode=""></image>
				</view>
			</u-overlay>
			<view class="bottomBox">
				<view class="bottomBtn" @click="download">
					点击下载
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getAppDownloadUrl} from '@/api/public.js'
	export default {
		data() {
			return {
				osName: '',
				ua: '',
				show: false,
				showAboutUs: false,
				downloadUrl:"",
			}
		},
		onLoad() {
			this.isWeixin()
			this.getSystemInfo()
			this.getDownLoadUrl()
		},
		methods: {
			getDownLoadUrl(){
				getAppDownloadUrl().then((res)=>{
					this.downloadUrl = res.data
				})
			},
			getSystemInfo() {
				uni.getSystemInfo({
					success: (res) => {
						this.ua = res.ua
						this.osName = res.osName
					}
				})
			},
			isWeixin() {
				var ua = window.navigator.userAgent;
				if ((ua.match(
						/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|MicroMessenger|micromessenger|Windows Phone)/i
					))) {} else {
					window.location.href = "../../static/html/index.html"
				}
			},
			goBeian() {
				window.open('https://beian.miit.gov.cn/')
			},
			download() {
				if (this.ua.indexOf('MicroMessenger') !== -1 || this.ua.indexOf('micromessenger') !== -1) {
					this.show = true
					return false
				}
				if (this.osName == "ios") { //ios系统的处理
					window.open('https://apps.apple.com/cn/app/卡玩/id6740520162')
				} else if (this.osName == "android") { //Android系统的处理
					// window.open(this.downloadUrl)
					window.location.href=this.downloadUrl
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		view {
			box-sizing: border-box;
		}

		background: #212121;
		position: relative;
		width: 750rpx;
		min-height: 100vh;

		.backgroundBox {
			width: 100%;
			height: 100%;
			background: linear-gradient(180deg, rgba(65, 16, 127, 0.56) 0%, rgba(12, 9, 196, 0) 100%);
			padding-bottom: 154rpx;
			overflow: scroll;

			.copyright {
				text-align: center;
				color: #6564a2;
				font-size: 20rpx;
				margin-top: 40rpx;
				padding-bottom: 12rpx;
				border-bottom: 1rpx solid rgba(255, 255, 255, 0.05);
			}

			.bottomBox {
				position: fixed;
				bottom: 0;
				width: 750rpx;
				height: 154rpx;
				background: linear-gradient(180deg, #1F1F1F 0%, #1D1A4A 100%);

				display: flex;
				justify-content: space-around;
				align-self: center;

				.bottomBtn {
					position: absolute;
					// margin: 0 auto;
					top: 50%;
					transform: translateY(-50%);
					width: 622rpx;
					height: 96rpx;
					// background: linear-gradient(0deg, #BEFD00, #BEFD00), linear-gradient(180deg, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0) 100%);
					background: linear-gradient(0deg, #66ff00, #66ff00), linear-gradient(180deg, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0) 100%);
					border: 1px solid #BEFD00;
					border-radius: 48rpx;
					text-align: center;
					line-height: 96rpx;
					font-size: 36rpx;
					font-weight: bold;
					letter-spacing: 2rpx;
				}
			}
		}
	}

	.overlayBox {
		text-align: right;
		padding: 48rpx;

		image {
			width: 494rpx;
			height: 302rpx;
		}
	}
	.logoInc{
		width: 350rpx;
		margin: 20rpx auto;
		image{
			width: 100%;
		}
	}
	.imageBg {
		height: 100vh;
		width: 100vw;

		image {
			height: 100%;
			width: 100%;
		}
	}
</style>